<template>
  <div>
    <!--标题模块 开始-->
    <van-nav-bar  @click-left="$router.push('/search')" @click-right="btn">
      <template #left >
        <van-icon name="search" size="18" color="#fff" />
      </template>
       <template  #title >
       <span @click="site">{{title}}</span>
      </template>
      <template #right>
        <van-icon name="contact" size="18" color="#fff" />
      </template>
    </van-nav-bar>
    <!--标题模块 结束-->

    <!--分类模块 开始-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#3190e8">
      <van-swipe-item v-for="(items, index) in categoryList" :key="index">
        <van-grid :column-num="4" :border="false" icon-size="40px">
          <van-grid-item
            v-for="item in items"
            :key="item.id"
            :icon="imgURL + item.image_url"
            :text="item.title"
            indicator-color="red"
            @click="toCategory(item.id, item.title)"
          />
        </van-grid>
      </van-swipe-item>
    </van-swipe>
    <!--分类模块 结束-->

    <!--附近商家 开始-->
    <div class="main">
      <div class="title">
        <van-icon name="shop-o" size="14" /><em>附近商家</em>
      </div>
      <shopList :list="shopList"></shopList>
    </div>
    <!--附近商家 结束-->

    <!--底部模块 开始-->
    <!-- <van-tabbar>
      <van-tabbar-item icon="home-o">外卖</van-tabbar-item>
      <van-tabbar-item icon="search">搜索</van-tabbar-item>
      <van-tabbar-item icon="todo-list-o">订单</van-tabbar-item>
      <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
    </van-tabbar> -->
    <myfooter :str="active"></myfooter>
    <!--底部模块 结束-->
  </div>
</template>

<script>
import { getCategoryList } from "@/api/category";
import { getShopsList } from "@/api/shops";
import shopList from "@/components/shopList";
import myfooter from "../components/footer.vue";
export default {
  components: {
    shopList,
    myfooter,
  },
  data() {
    return {
      categoryList: [], //分类数据
      imgURL: "https://fuss10.elemecdn.com/",
      shopList: [], //商铺数据
      active: "index",
      title:'首页'
    };
  },
  created() {
    this.token = localStorage.getItem('ele-68')
    if(this.$route.query.userid){
         this.title= this.$route.query.userid
    }
  //  this.title= this.$route.query.userid
    //获取分类列表
    getCategoryList().then((res) => {
      let list1 = [];
      let list2 = [];
      let num = 8;
      res.data.forEach((item, index) => {
        if (index < num) {
          list1.push(item);
        } else {
          list2.push(item);
        }
      });
      this.categoryList.push(list1, list2);
    });
    //获取商铺列表
    getShopsList({ latitude: 31.22967, longitude: 121.4762 }).then((res) => {
      this.shopList = res.data;
    });
  },
  methods: {
    btn(){
      if(this.token){
        this.$router.push('/my')
      }else{
        this.$router.push('/login')
      }
    },
    site(){
      this.$router.push('/city')
    },
    //跳转商铺分类页面
    toCategory(id, title) {
      this.$router.push({
        path: "/shopCate",
        query: {
          id,
          title,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main {
  border-top: 14px solid #f5f5f5;
  background-color: #fff;
  padding-bottom: 50px;
  overflow: hidden;
  .title {
    padding: 10px;
    font-size: 14px;
    color: #777;
    em {
      padding-left: 4px;
    }
  }
}
/deep/.van-nav-bar {
  background-color: #3190e8;
  .van-nav-bar__title {
    color: #fff;
    font-weight: 700;
  }
}
/deep/.van-swipe__indicators {
  bottom: 5px;
  .van-swipe__indicator {
    background-color: #666;
  }
}
</style>